<template>
	<div class="home-container layout-pd" :style="{'--prl':prl}">
		<el-row :gutter="10" class="home-card-one">
   <!-- xs:超小屏幕 sm:小屏幕 md:中屏幕 lg:大屏幕 xl:超大屏幕   k > 0 给除了第一个的 元素添加间距 -->
			<el-col :xs="24" :sm="index===0?24:12" :md="index===0?24:12" :lg="6" :xl="6"
				v-for="(item, index) in state.homeOne" :key="index" :class="{ 'home-media home-media-lg': index > 0, 'home-media-sm': index === 0 }">
				<div class="home-card-item flex" :style="{background:`url(${item.img}) center center/ 100% 100% no-repeat`}">
					<div class="flex-margin flex w100" :class="`home-one-animation${index}`">
						<div class="flex-auto">
       <div class="mb18 font18" :style="{'color':index==0?'#fff':'var(--el-menu-active-color)'}">{{ item.title }}</div>
							<span class="font30" :style="{'color':index==0?'#fff':'var(--el-menu-active-color)'}">{{ item.value }}</span>
							<div class="mt5" :style="{'color':index==0?'#fff':'var(--el-menu-active-color)'}">{{ item.num3 }}: +11%</div>
						</div>
						<!-- <div class="home-card-item-icon flex" :style="{ background: `var(${item.color2})` }">
							<i class="flex-margin font32" :class="item.num4" :style="{ color: `var(${item.color3})` }"></i>
						</div> -->
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="15" class="home-card-two mb15">
			<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="mt15">
				<div class="home-card-item">
					<div style="height: 100%" ref="homeLineRef"></div>
				</div>
			</el-col>
			<el-col :xs="24" :sm="12" :md="16" :lg="7" :xl="7" class="mt15">
				<div class="home-card-item">
					<div style="height: 100%" ref="homePieRef"></div>
				</div>
			</el-col>
   <el-col :xs="24" :sm="12" :md="8" :lg="5" :xl="5" class="mt15">
				<div class="home-card-item font16" :style="{color:state.charts.color}">
     <div class="home-card-item-title bt1">排行榜</div>
     <div class="table-box pt1 pb20">
      <table frame="box" rules="all" border="0" cellpadding="5" cellspacing="0" class="table">
       <tr>
         <th style="max-width:45px;min-width:45px;" class="pb3" width="45">排名</th>
         <th class="pb3" style="min-width: 60px;">姓名</th>
         <th style="min-width: 90px;" class="pr25 pb3">销售金额</th>
       </tr>
       <tr v-for="(item,index) in state.theChartsList" :key="index">
         <td>
          <div class="flex">
           <img v-if="index === 0" width="19" :src="ranking1" alt="">
           <img v-if="index === 1" width="19" :src="ranking2" alt="">
           <img v-if="index === 2" width="19" :src="ranking3" alt="">
           <div v-if="index>2" class="ranking">
            {{index+1}}
           </div>
          </div>
         </td>
         <td><div class="ellipsis" :title="item.name">{{item.name}}</div></td>
         <td><div class="ellipsis pr19" :title="item.value">{{item.value}}</div></td>
       </tr>
      </table>
     </div>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="15" class="home-card-three">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
				<div class="home-card-item">
					<div class="home-card-item-title">订单详情</div>
     <el-table header-row-class-name="tableHaed" :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="userName" label="单号" show-overflow-tooltip></el-table-column>
      <el-table-column prop="userNickname" label="日期" show-overflow-tooltip></el-table-column>
      <el-table-column prop="roleSign" label="产品类型" show-overflow-tooltip></el-table-column>
      <el-table-column prop="department" label="单价" show-overflow-tooltip></el-table-column>
      <el-table-column prop="phone" label="金额" show-overflow-tooltip></el-table-column>
      <el-table-column prop="email" label="销售渠道" show-overflow-tooltip></el-table-column>
      <el-table-column prop="describe" label="销售员" show-overflow-tooltip></el-table-column>
      <template v-slot:empty>
       <div class="pt35">
        <el-image :src="empty" />
       </div>
      </template>
			  </el-table>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="home">
import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from 'vue';
import * as echarts from 'echarts';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import total from '/@/assets/home/performance/total.png';
import today from '/@/assets/home/performance/today.png';
import month from '/@/assets/home/performance/month.png';
import week from '/@/assets/home/performance/week.png';
import year from '/@/assets/home/performance/year.png';
import ranking1 from '/@/assets/home/ranking/1.png';
import ranking2 from '/@/assets/home/ranking/2.png';
import ranking3 from '/@/assets/home/ranking/3.png';
import empty from '/@/assets/empty/data_empty.png';


// 定义变量内容
const homeLineRef = ref();
const homePieRef = ref();
const storesTagsViewRoutes = useTagsViewRoutes();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);

const state = reactive({
	global: {
		homeChartOne: null,
		homeChartTwo: null,
		homeCharThree: null,
		dispose: [null, '', undefined],
	} as any,
	homeOne: [
		{
   img:total,
			title: '总业绩',
			value: '12.32',
			num3: '订单统计信息',
			num4: 'fa fa-meetup',
			color1: '#FF6462',
			color2: '--next-color-primary-lighter',
			color3: '--el-color-primary',
		},
		{
   img:today,
			title: '今日销售额',
			value: '42.32',
			num3: '月度计划信息',
			num4: 'iconfont icon-ditu',
			color1: '#6690F9',
			color2: '--next-color-success-lighter',
			color3: '--el-color-success',
		},
  {
   img:week,
			title: '653,33',
			value: '42.32',
			num3: '月度计划信息',
			num4: 'iconfont icon-ditu',
			color1: '#6690F9',
			color2: '--next-color-success-lighter',
			color3: '--el-color-success',
		},
		{
   img:month,
			title: '125,65',
			value: '17.32',
			num3: '年度计划信息',
			num4: 'iconfont icon-zaosheng',
			color1: '#6690F9',
			color2: '--next-color-warning-lighter',
			color3: '--el-color-warning',
		},
		{
   img:year,
			title: '520,43',
			value: '10.01',
			num3: '访问统计信息',
			num4: 'fa fa-github-alt',
			color1: '#FF6462',
			color2: '--next-color-danger-lighter',
			color3: '--el-color-danger',
		},
	],
	myCharts: [] as EmptyArrayType,
 theChartsList:[{
  name:'中国人',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'989998999899989998999899989998999899989998999899989998999899989998999899哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9898999899989998999899989998999899989998999899989998999899989998999899989999'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'989998999899989998999899989998999899989998999899989998999899989998999899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 },{
  name:'哥',
  value:'9899'
 }] as any,
 tableData:{
  data:[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
  loading:false
 },
	charts: {
		theme: '',
		bgColor: '',
		color: '#000000',
	},
});
let prl = ref(100);

// 折线图
const initLineChart = (e = '0') => {
	if (!state.global.dispose.some((b: any) => b === state.global.homeChartOne)) state.global.homeChartOne.dispose();
	state.global.homeChartOne = markRaw(echarts.init(homeLineRef.value, state.charts.theme));

 let fill = {
  '0':{
   c:"#F7890E",
   b:"#FFF6EE"
  },
  '1':{
   c:"#F7890E",
   b:"#FFF6EE"
  }
 } as any;
 fill[e].c = '#fff';
 fill[e].b = '#F7890E';
	const option = {
		backgroundColor: state.charts.bgColor,
		title: {
			text: '渠道销售金额',
			x: 'left',
			textStyle: { fontSize: '15', color: state.charts.color },
		},
		grid: { top: 80, right: 20, bottom: 30, left: 30 }, // 图的位置方向
		tooltip: { trigger: 'axis' },
		// legend: { data: ['预购队列', '最新成交价'], right: 0 },
  toolbox:{    // 自定义按钮，多个按钮请使用数组包裹
    show:false,
    dataZoom: {
     yAxisIndex: 'none'  // 不限制在那个y轴缩放
    },
  },
  // 自定义内容
  graphic:{
   elements:[{
    type: 'text', // 图形类型为文本
    left: 8, // 文本左上角在画布中的横坐标
    top: 30, // 文本左上角在画布中的纵坐标
    z: 100, // 图形的层级，设置为较大的值确保在最上层
    style: {
      text: '近30天', // 文本内容
      fontSize: 12, // 字体样式
      backgroundColor:fill['0'].b,
      width:70,
      height:25,
      lineHeight:27,
      borderRadius:3,
      textAlign:'center',
      fill:fill['0'].c, // 文本颜色
    },
    onclick:()=>{
     initLineChart('0'); // 更新
    },
   },{
    type: 'text', // 图形类型为文本
    left: 88, // 文本左上角在画布中的横坐标
    top: 30, // 文本左上角在画布中的纵坐标
    z: 100, // 图形的层级，设置为较大的值确保在最上层
    style: {
      text: '最近一年', // 文本内容
      fontSize: 12, // 字体样式
      backgroundColor:fill['1'].b,
      width:70,
      height:25,
      lineHeight:27,
      borderRadius:3,
      textAlign:'center',
      fill:fill['1'].c, // 文本颜色
    },
    onclick:()=>{
     initLineChart('1'); // 更新
    },
   }]
  },
  // 启用数据缩放
  dataZoom: [
    // {
    //   type: 'slider', // 内置型数据缩放 底部会出现一个放大缩小的 尺子
    //   start: 0,
    //   end: 100,
    // },
    {
      type: 'inside', // 外置型数据缩放
      start: 0,
      end: 100,
    },
  ],
		xAxis: {
			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
		},
		yAxis: [
			{
				type: 'value',
				name: '',  // 价格
				splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
			},
		],
  // 数据展示 -
		series: [
			{
				name: '预购队列',
				type: 'line',
				symbolSize: 6,
				symbol: 'circle',
				smooth: true,
				data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
				lineStyle: { color: '#F7890E' },
				itemStyle: { color: '#F7890E', borderColor: '#F7890E' },
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: '#f7890e8a' },
						{ offset: 1, color: '#F7890E03' },
					]),
				},
			}
		],
	};
	state.global.homeChartOne.setOption(option);
	state.myCharts.push(state.global.homeChartOne);
};
// 饼状图
const initPieChart = () => {
	if (!state.global.dispose.some((b: any) => b === state.global.homeChartTwo)) state.global.homeChartTwo.dispose();
	state.global.homeChartTwo = markRaw(echarts.init(homePieRef.value, state.charts.theme));
	var getname = ['阿里云', '优刻得', '华为云', '腾讯云', '其他']; // 名称
	var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];   // 数据
	var data:Array<{name:any,value:any}> = []; // 载入数据和名称
	for (var i = 0; i < getname.length; i++) {
		data.push({ name: getname[i], value: getvalue[i] });
	}
	const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8'];
	const option = {
		backgroundColor: state.charts.bgColor,
		title: {
			text: '渠道销售明细',
			x: 'left',
			textStyle: { fontSize: '15', color: state.charts.color },
		},
		tooltip: { trigger: 'item', formatter: '{b} <br/> {d}%' },
  // 背景图片 自定义内容
		graphic: {
			elements: [
				{
					type: 'image',
					z: -1,
					style: {
						image: themeConfig.value.isIsDark
							? ''
							: '',
						width: 230,
						height: 230,
					},
					left: '16.5%',
					top: 'center',
				},
    {
      type: 'text', // 图形类型为文本
      right: "22%", // 文本左上角在画布中的横坐标
      top: '22%', // 文本左上角在画布中的纵坐标
      z: 100, // 图形的层级，设置为较大的值确保在最上层
      style: {
        text: '产品名称', // 文本内容
        fontSize: 14, // 字体样式
        fill: '#000', // 文本颜色
      },
      onclick:(e:any)=>{
       console.log(e,"eeee")
      },
    },
    {
      type: 'text', // 图形类型为文本
      right: "1%", // 文本左上角在画布中的横坐标
      top: '22%', // 文本左上角在画布中的纵坐标
      z: 100, // 图形的层级，设置为较大的值确保在最上层
      style: {
        text: '销售金额', // 文本内容
        fontSize: 14, // 字体样式
        fill: '#000', // 文本颜色
      },
      onclick:(e:any)=>{
       console.log(e,"eeee")
      },
    },
			],
		},
  // 自定义展示的数据
		legend: [
   {
			type: 'scroll',
			orient: 'vertical',
   itemGap:20,  // 间隔
			right: '20%',
			top: '30%',
   title:"11",
			itemWidth: 12,
			itemHeight: 8,
			data: getname,
			textStyle: {
    fontSize: 14,  // 字体大小
				rich: {
					name: {
						fontSize: 14,
						fontWeight: 400,
						width: 35,
						height: 35,
						padding: [0, 0, 10, 60],
						color: state.charts.color,
					},
					rate: {
						fontSize: 15,
						fontWeight: 500,
						height: 35,
						width: 40,
						padding: [0, 0, 10, 30],
						color: state.charts.color,
					},
				},
			},
		},{
			type: 'scroll',
			orient: 'vertical',
   itemGap:20,  // 间隔
			right: '-1%',
			top: '30%',
   align:'right',
			itemHeight: 0,// 颜色 方格
   itemWidth: 0,  // 颜色 方格
   color:'#0000',
   formatter: function (name:string) {
      // 在 formatter 中返回数据项的值（value），不显示颜色块
      for (let i = 0; i < data.length; i++) {
       if(data[i].name == name){
        return data[i].value
       }
      }
      return ``;
    },
			textStyle: {
    fontSize: 14,  // 字体大小
				rich: {
					name: {
						fontSize: 14,
						fontWeight: 400,
						width: 35,
						height: 35,
						padding: [0, 0, 10, 60],
						color: state.charts.color,
					},
					rate: {
						fontSize: 15,
						fontWeight: 500,
						height: 35,
						width: 40,
						padding: [0, 0, 10, 30],
						color: state.charts.color,
					},
				},
			},
		}],
  // 内容
		series: [
			{
				type: 'pie',
				radius: ['60', themeConfig.value.isIsDark ? '50' : '102'],
				center: ['30%', '50%'],   // 位置
				itemStyle: {
					color: function (params: any) {
						return colorList[params.dataIndex];
					},
				},
				label: { show: false },   // 饼图旁边  出现数据
				labelLine: { show: false },   // 饼图旁边  出现数据
				data: data,
			},
		],
	};
	state.global.homeChartTwo.setOption(option);
	state.myCharts.push(state.global.homeChartTwo);
};
// 批量设置 echarts resize
const initEchartsResizeFun = () => {
	nextTick(() => {
  let w = window.innerWidth;
  if(w > 1650) {
   prl.value = 100;
  } else if(w > 1450){
   prl.value = 30;
  } else {
   prl.value = 15;
  };
		for (let i = 0; i < state.myCharts.length; i++) {
			setTimeout(() => {
				state.myCharts[i].resize();
			}, i * 1000);
		}
	});
};
// 批量设置 echarts resize
const initEchartsResize = () => {
	window.addEventListener('resize', initEchartsResizeFun);
};
// 页面加载时
onMounted(() => {
	initEchartsResize();
});
// 由于页面缓存原因，keep-alive
onActivated(() => {
	initEchartsResizeFun();
});
// 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
watch(
	() => isTagsViewCurrenFull.value,
	() => {
		initEchartsResizeFun();
	}
);
// 监听 pinia 中是否开启深色主题
watch(
	() => themeConfig.value.isIsDark,
	(isIsDark) => {
		nextTick(() => {
			state.charts.theme = isIsDark ? 'dark' : '';
			state.charts.bgColor = isIsDark ? 'transparent' : '';
			state.charts.color = isIsDark ? '#dadada' : '#000000';
			setTimeout(() => {
				initLineChart();
			}, 500);
			setTimeout(() => {
				initPieChart();
			}, 700);
		});
	},
	{
		deep: true,
		immediate: true,
	}
);
</script>

<style scoped lang="scss">
 @media only screen and (min-width: 1000px){
  .home-container{
   padding: 35px calc(var(--prl) * 1px) !important;
  }
 }
.home-container {
	overflow: hidden;
 transition: padding .3s;
	.home-card-one,.home-card-two,.home-card-three {
		.home-card-item {
			width: 100%;
			height: 150px;
			border-radius: 4px;
			transition: all ease 0.3s;
			padding: 20px;
			overflow: hidden;
			background: var(--el-color-white);
			color: var(--el-text-color-primary);
			border: 1px solid var(--next-border-color-light);
			&:hover {
				box-shadow: 0 2px 12px var(--next-color-dark-hover);
				transition: all ease 0.3s;
			}
			&-icon {
				width: 70px;
				height: 70px;
				border-radius: 100%;
				flex-shrink: 1;
				i {
					color: var(--el-text-color-placeholder);
				}
			}
			&-title {
				font-size: 15px;
				font-weight: bold;
				height: 30px;
			}
		}
	}
	.home-card-one {
		@for $i from 0 through 4 {
			.home-one-animation#{$i} {
				opacity: 0;
				animation-name: error-num;
				animation-duration: 0.5s;
				animation-fill-mode: forwards;
				animation-delay: calc($i/6) + s;
			}
		}
	}
	.home-card-two {
		.home-card-item {
			height: 400px;
			width: 100%;
			overflow: hidden;
   position: relative;
		}
	}
 .home-card-three {
		.home-card-item {
			min-height: 500px;
   height: auto;
			width: 100%;
			overflow: hidden;
   position: relative;
		}
	}
}

.bt1{
 &::after{
  content: "";
  position: absolute;
  height: 1px;
  background: #E5E5E5;
  left: 0;
  right: 0;
  top: 50px;
 }
}
.tae{
 text-align: end;
}
.tac{
 text-align: center;
}
.ti2{
 text-indent:2em;
}
// 自定义栏格样式
.home-card-one{
 @media only screen and (min-width: 1200px){
  .el-col-lg-6{
   max-width: 20%;
  }
  .home-media-sm{
   max-width: 24%;
  }
  .home-media-lg{
   max-width: 19%;
  }
 }
}
.table-box{
 overflow: auto;
 height: 100%;
}
.table{
 width: 100%;
 th, td {
   border: none;
   padding: 10px 8px 0; /* 可根据需要添加内边距 */
   font-size: 14px;
   text-align: start;
 }
 th{
  font-weight: 500;
  &:last-child{
   text-align: end;
  }
 }
 td:last-child{
  text-align: end;
 }
 &:hover{
  tr{
   &:first-child{
     transition: box-shadow .5s;
     box-shadow: -9px -3px 9px #ccc;
   }
  }
 }
 tr{
  vertical-align: bottom;
  &:first-child{
   background-color: #fff;
   padding-bottom: 10px;
   position: sticky;
   top: 0;
  }
 }
 .ranking{
   width: 18px;
   height: 18px;
   color: #fff;
   background: #C8CBCF;
   border-radius: 50%;
   text-align: center;
   line-height: 18px;
   font-size: 10px;
   padding: 1px 0px 0 0;
 }
}
:deep(){
 .tableHaed{
  background-color: #ccc;
 }
}
</style>
